{{ define "validatorLifeCycleDiagram" }}
  {{ $deposited := or (eq .Status "deposited") (eq .Status "deposited_invalid") }}


  <div class="validator__lifecycle-container">
    <div class="validator__lifecycle-content">
      <div id="lifecycle-deposited" class="validator__lifecycle-node-container validator__lifecycle-deposited">
        <div class="validator__lifecycle-node-header"><a class="no-highlight" href="https://kb.beaconcha.in/ethereum-2.0-depositing#2-deposit-contract-status-deposited">Deposited</a></div>
        <div class="validator__lifecycle-node" data-toggle="tooltip" title="This will turn green when your deposit has been processed by the beacon chain">
          <i class="fas fa-check deposit-success"></i>
          <i class="fas fa-times fail deposit-fail"></i>
          <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
          </div>
        </div>
      </div>
      <div class="validator__lifecycle-progress validator__lifecycle-deposited text-white">
        <div class="validator__lifecycle-progress-epoch">
          {{ if and (not $deposited) ( ne .ActivationEligibilityEpoch 9223372036854775807) }}<div data-toggle="tooltip" data-html="true" title="<span>The eligible epoch is when your validator is registered by the beacon chain and joins the queue to be activated.</span><br><span aria-ethereum-date='{{ .ActivationEligibilityTs.Unix }}'></span>"><a href="/epoch/{{ .ActivationEligibilityEpoch }}">{{ if eq .ActivationEligibilityEpoch 0 }}genesis{{ else }}{{ .ActivationEligibilityEpoch }}{{ end }}</a></div>{{ end }}
        </div>
      </div>
      <div id="lifecycle-pending" class="validator__lifecycle-node-container validator__lifecycle-pending">
        <div class="validator__lifecycle-node-container">
          <div class="validator__lifecycle-node-header"><a class="no-highlight" href="https://kb.beaconcha.in/ethereum-2.0-depositing#3-validator-queue-status-pending">Pending</a></div>
          <div class="validator__lifecycle-node" data-toggle="tooltip" title="After being processed your validator joins a queue to be activated">
            <i class="fas fa-hourglass-half pending-waiting"></i>
            <i class="fas fa-check"></i>
            <div class="spinner">
              <div class="double-bounce1"></div>
              <div class="double-bounce2"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="validator__lifecycle-progress validator__lifecycle-pending">
        <div class="validator__lifecycle-progress-epoch">
          {{ if and (not $deposited) (ne .ActivationEpoch 9223372036854775807) }}
            <div data-toggle="tooltip" data-html="true" title="<span>The activation epoch is when your validator becomes active.</span><br><span aria-ethereum-date='{{ .ActivationTs.Unix }}'></span> ">
              <a href="/epoch/{{ .ActivationEpoch }}">{{ if eq .ActivationEpoch 0 }}genesis{{ else }}{{ .ActivationEpoch }}{{ end }}</a>
            </div>
          {{ end }}
        </div>
      </div>
      <div id="lifecycle-active" class="validator__lifecycle-node-container validator__lifecycle-active">
        <div class="validator__lifecycle-node-container">
          <div class="validator__lifecycle-node-header"><a class="no-highlight" href="https://kb.beaconcha.in/ethereum-2.0-depositing#4-staking-status-active">Active</a></div>
          <div class="validator__lifecycle-node" data-toggle="tooltip" title="Once your validator reaches this state it can participate in attesting and proposing. Make sure it stays online!">
            <i class="fas fa-power-off online"></i>
            <i class="fas fa-power-off offline"></i>
            <i class="fas fa-check"></i>
            <div class="spinner">
              <div class="double-bounce1"></div>
              <div class="double-bounce2"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="validator__lifecycle-progress validator__lifecycle-active">
        <div class="validator__lifecycle-progress-epoch">
          {{ if not (or (eq .ExitEpoch 9223372036854775807) (eq .ExitEpoch 0)) }}<div data-toggle="tooltip" data-html="true" title="<span>The exit epoch is when your validator will leave the network</span><br><span aria-ethereum-date='{{ .ExitTs.Unix }}'></span>"><a href="/epoch/{{ .ExitEpoch }}">{{ .ExitEpoch }}</a></div>{{ end }}
        </div>
      </div>
      <div id="lifecycle-exited" class="validator__lifecycle-node-container validator__lifecycle-exited">
        <div class="validator__lifecycle-node-container">
          <div class="validator__lifecycle-node-header"><a class="no-highlight" href="https://kb.beaconcha.in/ethereum-2.0-depositing#4-staking-status-active">Exited</a></div>
          <div class="validator__lifecycle-node" data-toggle="tooltip" title="If your validator misbehaves or chooses to leave the network it will join a queue to leave.">
            <i class="fas fa-door-open"></i>
            <div class="spinner">
              <div class="double-bounce1"></div>
              <div class="double-bounce2"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{{ end }}

{{ define "validatorOverviewDeposited" }}
  {{ with .Data }}
    {{ if .ElectraHasHappened }}
      <div class="text-justify row justify-content-center mb-2">
        <div class="col">
          <div class="px-2">
            <div class="p-2 mx-auto" style="max-width: 50rem;">
              {{ if and (and (lt .EstimatedActivationEpoch 100_000_000) (eq .EstimatedIndexEpoch 0)) (not .PendingDepositAboveMinActivation) }}
                The validator has a deposit but has not yet reached the minimum balance of <b>{{ formatClCurrency config.Chain.ClConfig.MinActivationBalance $.Rates.ClCurrency 0 true false false false }}</b> required for activation. Another deposit may be necessary to reach this threshold, depending on recent activity.
              {{ else }}
                A deposit for this validator has been found and is waiting in the queue to be processed.
                {{ if and (and (lt .EstimatedActivationEpoch 100_000_000) (.PendingDepositAboveMinActivation)) (gt .EstimatedActivationEpoch 0) }}
                  It is estimated to be activated on <span class="font-weight-bolder" title="{{ .EstimatedActivationTs }}" data-toggle="tooltip" aria-ethereum-date="{{ .EstimatedActivationTs.Unix }}">{{ .EstimatedActivationTs }}</span> during epoch <span class="font-weight-bolder">{{ .EstimatedActivationEpoch }}</span>.
                {{ else if and (lt .EstimatedActivationEpoch 100_000_000) (gt .EstimatedIndexEpoch 0) }}
                  The deposit will be credited on <span class="font-weight-bolder" title="{{ .EstimatedIndexTs }}" data-toggle="tooltip" aria-ethereum-date="{{ .EstimatedIndexTs.Unix }}">{{ .EstimatedIndexTs }}</span> during epoch <span class="font-weight-bolder">{{ .EstimatedIndexEpoch }}</span> but for the validator to get activated, it must have a balance of at least <b>{{ formatClCurrency config.Chain.ClConfig.MinActivationBalance $.Rates.ClCurrency 0 true false false false }}</b>.
                {{ else }}
                  We are calculating your position in the queue, please check back in a couple minutes.
                {{ end }}
                Make sure your nodes and your client are up and running <em>before</em> the countdown reaches zero.
              {{ end }}
            </div>
            {{ if gt .QueuePosition 0 }}
              <div class="d-flex justify-content-center">
                <p>This validator is currently <span class="font-weight-bolder d-inline-block text-underlined" data-toggle="tooltip" title="{{ formatClCurrency .ChurnRate $.Rates.ClCurrency 0 true false false false }} get dequeued each Epoch.">#{{ .QueuePosition }}</span> in the queue.</p>
              </div>
            {{ end }}
            <div class="my-4" style="min-width:300px;">
              {{ template "validatorCountdown" . }}
            </div>
          </div>
        </div>
      </div>
    {{ else }}
      <div class="text-justify row justify-content-center mb-2">
        <div class="col">
          <div class="px-2">
            <div class="px-2 mx-auto" style="max-width: 50rem;">
              <span>
                {{ if eq .InclusionDelay 0 }}
                  A deposit has been made, and your validator will be voted into the activation queue once the deposited amount sums up to .
                {{ else }}
                  The last deposit to the Deposit contract was made {{ if gt .Deposits.LastEth1DepositTs 0 }}<span aria-ethereum-date-format="FROMNOW" aria-ethereum-date="{{ .Deposits.LastEth1DepositTs }}"></span>{{ end }}, it will take <a href="https://kb.beaconcha.in/ethereum-2.0-and-depositing-process">around 15 minutes</a> until your deposit is processed by the beacon chain. This validator will be eligible for activation once the deposited amount sums up to {{ formatClCurrency config.Chain.ClConfig.MaxEffectiveBalance $.Rates.ClCurrency 0 true false false false }}.
                {{ end }}
                <br />
                <br /><br />
                Join our <a href="https://dsc.gg/beaconchain">Discord server</a> for support, questions and suggestions. <br /><br />
                Download the <a href="https://beaconcha.in/mobile">mobile app</a> to monitor your validator.
              </span>
            </div>
          </div>
        </div>
      </div>
    {{ end }}
    <script>
      window.addEventListener("load", function () {
        $("#deposits-tab").click()
      })
    </script>
  {{ end }}
{{ end }}

{{ define "validatorOverviewPending" }}
  <div class="text-justify row justify-content-center mb-2">
    <div class="col">
      <div class="px-2">
        <div class="p-2 mx-auto" style="max-width: 50rem;">
          This validator has been processed by the beacon chain and is currently waiting to be activated.
          {{ if lt .ActivationEpoch 100_000_000 }}
            It will be activated on <span class="font-weight-bolder" title="{{ .ActivationTs }}" data-toggle="tooltip" aria-ethereum-date="{{ .ActivationTs.Unix }}">{{ .ActivationTs }}</span> during epoch <span class="font-weight-bolder">{{ .ActivationEpoch }}</span>.
          {{ else if and (lt .EstimatedActivationEpoch 100_000_000) (gt .EstimatedActivationEpoch 0) }}
            It is estimated to be activated on <span class="font-weight-bolder" title="{{ .EstimatedActivationTs }}" data-toggle="tooltip" aria-ethereum-date="{{ .EstimatedActivationTs.Unix }}">{{ .EstimatedActivationTs }}</span> during epoch <span class="font-weight-bolder">{{ .EstimatedActivationEpoch }}</span>.
          {{ else }}
            We are currently updating your estimate, expect an activation within the next couple epochs.
          {{ end }}
          Make sure your nodes and your client are up and running <em>before</em> the countdown reaches zero.
        </div>
        {{ if gt .QueuePosition 0 }}
          <div class="d-flex justify-content-center">
            {{ if .ElectraHasHappened }}
              <p>This validator is currently <span class="font-weight-bolder d-inline-block text-underlined" data-toggle="tooltip" title="{{ formatClCurrency .ChurnRate $.Rates.ClCurrency 0 true false false false }}  get dequeued each Epoch.">#{{ .QueuePosition }}</span> in the queue.</p>
            {{ else }}
              <p>This validator is currently <span class="font-weight-bolder d-inline-block text-underlined" data-toggle="tooltip" title="{{ .ChurnRate }} Validators get dequeued each Epoch.">#{{ .QueuePosition }}</span> in the queue.</p>
            {{ end }}
          </div>
        {{ end }}
        <div class="my-4" style="min-width:300px;">
          {{ template "validatorCountdown" . }}
        </div>
      </div>
    </div>
  </div>
  <script>
    window.addEventListener("load", function () {
      $("#deposits-tab").click()
    })
  </script>
{{ end }}

{{ define "validatorOverviewValidating" }}
  {{ with .Data }}
    <!-- Validator Lifecycle State Diagram -->
    <div class="overview-container d-flex flex-wrap justify-content-center">
      <div class="m-3 position-relative" style="flex-basis: 4rem; white-space: nowrap;">
        <span style="top:-1.2rem; white-space: nowrap;" class="text-muted font-weight-lighter position-absolute"><small>{{ if gtf .RankPercentage 0.0 }}{{ if gtf .RankPercentage 0.001 }}Rank {{ formatPercentageWithGPrecision .RankPercentage 3 }} %{{ else }}Top 0.1%{{ end }}{{ else }}Rank{{ end }}</small></span>
        <a class="no-highlight" href="/validators/leaderboard">
          <i style="font-size: 16px;" class="fas fa-medal"></i>
          <span id="validatorRank" style="font-weight: bold; font-size:16px;">{{ if gt .Rank7d 0 }}{{ .Rank7d }}{{ else }}N/A{{ end }}</span>
        </a>
      </div>
      <div class="m-3 position-relative" style="flex-basis: 4rem; white-space: nowrap;">
        <span style="top:-1.2rem; white-space: nowrap;" class="text-muted font-weight-lighter position-absolute"><small>Status</small></span>
        {{ .Status | formatValidatorStatus }}
      </div>
      <div class="m-3 position-relative" style="flex-basis: 4rem; white-space: nowrap;">
        <span style="top:-1.2rem; white-space: nowrap;" class="text-muted font-weight-lighter position-absolute"><small>Balance</small></span>
        <div class="d-flex flex-column">
          <span style="font-weight: bold; font-size:18px;">{{ formatClCurrency .CurrentBalance $.Rates.SelectedCurrency 5 true false false false }}</span>
          <span style="font-size: 0.8rem; color: gray"
            >{{ formatEffectiveBalance .EffectiveBalance config.Frontend.MainCurrency }}
            <span data-toggle="tooltip" title="The effective balance is used to calculate the base rewards of a validator"
              ><a class="no-highlight" href="https://kb.beaconcha.in/glossary#current-balance-and-effective-balance"><i class="far ml-1 fa-question-circle"></i></a></span
          ></span>
        </div>
      </div>

      <div class="m-3 position-relative" style="flex-basis: 4rem; white-space: nowrap;">
        <span style="top:-1.2rem; white-space: nowrap;" class="text-muted font-weight-lighter position-absolute"><small>BeaconScore (30d)</small></span>
        {{ formatBeaconscore .Beaconscore true }}
      </div>
    </div>
    {{ template "validatorOverviewCount" . }}
  {{ end }}
{{ end }}

{{ define "validatorOverviewExited" }}
  {{ with .Data }}
    <div class="overview-container d-flex flex-wrap justify-content-center">
      {{ if .Slashed }}
        <div style="width: 80px;" class="m-3 position-relative">
          <span style="top:-1.2rem;" class="text-muted font-weight-lighter position-absolute"><small>Slashed by</small></span>
          {{ .SlashedBy | formatValidator }}
        </div>
      {{ end }}
      <div class="m-3 position-relative">
        <span style="top:-1.2rem;" class="text-muted font-weight-lighter position-absolute"><small>Balance</small></span>
        <div style="width: 8.32rem" class="d-flex flex-column">
          <span style="font-weight: bold; font-size:18px;">{{ formatClCurrency .CurrentBalance $.Rates.SelectedCurrency 5 true false false false }}</span>
          <span
            >{{ formatEffectiveBalance .EffectiveBalance config.Frontend.MainCurrency }}
            <span style="font-size:0.8rem; color:gray" data-toggle="tooltip" title="The effective balance is used to calculate the base rewards of a validator"
              ><a class="no-highlight" href="https://kb.beaconcha.in/glossary#current-balance-and-effective-balance"><i class="far ml-1 fa-question-circle"></i></a></span
          ></span>
        </div>
      </div>
      <div style="width: 80px;" class="m-3 position-relative">
        <span style="top:-1.2rem;" class="text-muted font-weight-lighter position-absolute"><small>Status</small></span>
        {{ .Status | formatValidatorStatus }}
      </div>

      {{ if .Slashed }}
        <div style="width: 8.32rem" class="m-3 position-relative">
          <span style="top:-1.2rem;" class="text-muted font-weight-lighter position-absolute"><small>Reason</small></span>
          {{ .SlashedFor }}
        </div>
      {{ end }}
    </div>

    <div class="p-2 text-justify row justify-content-center">
      <div class="col">
        <div class="px-2 mx-auto" style="max-width: 50rem;">
          <div class="p-2 text-justify">
            {{ if gt .ConsolidationTargetIndex -1 }}
              {{ if and (not (eq .WithdrawableEpoch 9223372036854775807)) (lt .NetworkStats.CurrentEpoch .WithdrawableEpoch ) }}
                This validator will be consolidated into validator <a href="/validator/{{ .ConsolidationTargetIndex }}">{{ .ConsolidationTargetIndex }}</a> on <span aria-ethereum-date="{{ .WithdrawableTs.Unix }}"></span>.
              {{ else }}
                This validator has been consolidated, and its funds and duties have moved to validator <a href="/validator/{{ .ConsolidationTargetIndex }}">{{ .ConsolidationTargetIndex }}</a>.
              {{ end }}
            {{ else }}
              {{ if .FutureDutiesEpoch }}
                This validator has exited the system during epoch <a href="/epoch/{{ .ExitEpoch }}">{{ .ExitEpoch }}</a> but has still future duties. <i class="fas fa-exclamation-circle"></i> Please keep the validator running until epoch <a href="/epoch/{{ .FutureDutiesEpoch }}">{{ .FutureDutiesEpoch }}</a>!
              {{ else }}
                This validator has exited the system during epoch <a href="/epoch/{{ .ExitEpoch }}">{{ .ExitEpoch }}</a> and is no longer validating. There is no need to keep the validator running anymore.
              {{ end }}

              {{ if .CappellaHasHappened }}
                Eligible for withdrawals after epoch <span><a href="/epoch/{{ .WithdrawableEpoch }}">{{ .WithdrawableEpoch }}</a></span
                >. Withdrawals are handled by the protocol’s <a href="https://kb.beaconcha.in/ethereum-staking/how-withdrawals-work" target="_blank" rel="noopener">regular sweep</a> and may take several days to complete.
                {{ if not .IsWithdrawableAddress }}
                  <p class="text-center mt-4">
                    <span class="text-warning ml-1"><i class="fas fa-exclamation-triangle"></i> Withdrawals require 0x01 or 0x02 withdrawal credentials. <a href="https://launchpad.ethereum.org/en/withdrawals" target="_blank" rel="noopener">Learn more</a>.</span>
                  </p>
                {{ else }}
                  {{ if gt .CurrentBalance 0 }}
                    <p class="text-center mt-4">
                      We estimate you will receive your final withdrawal {{ formatTimestamp .NextWithdrawalTs }}.
                      <br />
                      <small>Note: Due to uncertainty in execution-triggered withdrawals, your withdrawal may take significantly longer to process.</small>
                    </p>
                  {{ end }}
                {{ end }}

              {{ else }}
                <span data-toggle="tooltip" title="Please note that the withdraw functionality has not been implemented by ACD yet.">
                  Eligible for withdrawals after epoch <span><a href="/epoch/{{ .WithdrawableEpoch }}">{{ .WithdrawableEpoch }}</a></span
                  >. Withdrawals are handled by the protocol’s regular sweep and may take several days to complete. </span
                >.
              {{ end }}
            {{ end }}
          </div>
          {{ if .Slashed }}<div class="p-2">Slashed by {{ .SlashedBy | formatValidator }} at Slot {{ .SlashedAt | formatBlockSlot }}, Reason: {{ .SlashedFor }}</div>{{ end }}
        </div>
      </div>
    </div>
    {{ template "validatorOverviewCount" . }}
  {{ end }}
{{ end }}

{{ define "validatorOverviewCount" }}
  <div class="row flex-wrap justify-content-center p-3 mb-3">
    <div class="mx-3">
      <span id="blockCount" style="cursor: pointer;" data-toggle="tooltip" title="Blocks (Proposed: {{ .ProposedBlocksCount }}, Missed: {{ .MissedBlocksCount }}, Orphaned: {{ .OrphanedBlocksCount }}, Scheduled: {{ .ScheduledBlocksCount }})"><i class="fas fa-cubes poin"></i> {{ .BlocksCount }}{{ if ne .BlocksCount 0 }}({{ formatPercentageColoredEmoji .UnmissedBlocksPercentage }}){{ end }}</span>
    </div>
    <div class="mx-3">
      <span id="attestationCount" style="cursor: pointer;" data-toggle="tooltip" title="Attestation Assignments (Executed: {{ .ExecutedAttestationsCount }}, Missed: {{ .MissedAttestationsCount }})"><i class="fas fa-file-signature"></i> {{ .AttestationsCount }}{{ if ne .AttestationsCount 0 }}({{ formatPercentageColoredEmoji .UnmissedAttestationsPercentage }}){{ end }}</span>
    </div>
    <div class="mx-3">
      <span id="syncCount" style="cursor: pointer;" data-toggle="tooltip" title="Sync Participations (Participated: {{ .ParticipatedSyncCountSlots }}, Missed: {{ .MissedSyncCountSlots }}, Orphaned: {{ .OrphanedSyncCountSlots }}, Scheduled: {{ .ScheduledSyncCountSlots }})">
        {{ if .ScheduledSyncCountSlots }}
          <i class="fas fa-sync poin spin"></i>
        {{ else }}
          <i class="fas fa-sync poin"></i>
        {{ end }}
        {{ .SyncCount }}
        {{ if .SyncCount }}
          ({{ formatPercentageColoredEmoji .UnmissedSyncPercentage }})
          {{ if .ScheduledSyncCountSlots }}
            {{ .SlotsDoneInCurrentSyncCommittee }}/{{ .SlotsPerSyncCommittee }}
          {{ end }}
        {{ end }}
      </span>
    </div>
    <div class="mx-3">
      <span id="slashingsCount" style="cursor: pointer;" data-toggle="tooltip" title="Other validators slashed"><i class="fas fa-user-slash"></i> {{ .SlashingsCount }}</span>
    </div>
    <div class="mx-3">
      <span id="depositCount" style="cursor: pointer;" data-toggle="tooltip" title="Deposits made to the deposit contract"><i class="fas fa-wallet"></i> {{ .DepositsCount }}</span>
    </div>

    {{ if .CappellaHasHappened }}
      <div class="mx-3">
        <span id="withdrawalCount" style="cursor: pointer;" data-toggle="tooltip" {{ if .IsWithdrawableAddress }}title="Withdrawals processed for this validator"{{ else }}title="To receive withdrawals, 0x01 or 0x02 withdrawal credentials are required. Click here for more information."{{ end }}>
          {{ if .IsWithdrawableAddress }}
            <i class="fas fa-money-bill"></i>
            {{ .WithdrawalCount }}
          {{ else }}
            <a href="{{ if eq config.Chain.Id 100 }}https://docs.gnosischain.com/node/management/withdrawals/#how-to-change-the-withdrawal-credential{{ else }}https://launchpad.ethereum.org/en/withdrawals{{ end }}">
              <i class="fas fa-money-bill" style="color:var(--body-color)"></i>
              <i class="text-warning fas fa-exclamation-triangle"></i>
              <i class="fas fa-external-link-alt"></i>
            </a>
          {{ end }}
        </span>
      </div>
    {{ end }}


    <!--
    <div class="mx-3">
        {{ if ne .CurrentAttestationStreak .LongestAttestationStreak }}
      <span id="attestationStreak" style="cursor: default;" data-toggle="tooltip" title="Attestation Streaks (Current / Longest)"><i class="fas fa-fire"></i> {{ .CurrentAttestationStreak }} / {{ .LongestAttestationStreak }}</span>
    {{ else }}
      <span id="attestationStreak" style="cursor: default;" data-toggle="tooltip" title="Attestation Streak"><i class="fas fa-fire"></i> {{ .LongestAttestationStreak }}</span>
    {{ end }}
    </div>
    -->
  </div>

  <script>
    window.addEventListener("load", function () {
      $("#blockCount").on("click", function () {
        $("#blocks-tab").click()
      })
      $("#attestationCount").on("click", function () {
        $("#attestations-tab").click()
      })
      $("#syncCount").on("click", function () {
        $("#sync-tab").click()
      })
      $("#slashingsCount").on("click", function () {
        $("#slashings-tab").click()
      })
      $("#depositCount").on("click", function () {
        $("#deposits-tab").click()
      })
      $("#withdrawalCount").on("click", function () {
        $("#withdrawal-tab").click()
      })
    })
  </script>
{{ end }}
